<template>
	<view class="container">
		<view class='pic'>
		  <view class='input_label'>身份证人像面</view>
		  <view class='pic_unit_1' :style='{height:width}' v-if="id_face!='0'" data-type="id_face" v-on:click='update_logo'>
			<image class='pic_unit_pic'  :style='{height:width}' mode='aspectFill' :src='id_face'></image>
		  </view>
		  <view class='add_pic1' :style='{height:width}' v-if="id_face=='0'" data-type="id_face" v-on:click='update_logo'><view>身份证人像面</view></view>
		</view>
		<view class='pic'>
		  <view class='input_label'>身份证国徽面</view>
		  <view class='pic_unit_1' :style='{height:width}' v-if="id_national_emblem!='0'" data-type="id_national_emblem" v-on:click='update_logo'>
			<image class='pic_unit_pic'  :style='{height:width}' mode='aspectFill' :src='id_national_emblem'></image>
		  </view>
		  <view class='add_pic1' :style='{height:width}' v-if="id_national_emblem=='0'" data-type="id_national_emblem" v-on:click='update_logo'><view>身份证国徽面</view></view>
		</view>
<!--		<view class='pic'>-->
<!--		  <view class='input_label'>店内照</view>-->
<!--		  &lt;!&ndash; <view class='pic_unit_1' :style='{height:width}' v-if="imgurl!='0'" data-type="img" v-on:click='update_logo'>-->
<!--			<image class='pic_unit_pic'  :style='{height:width}' mode='aspectFill' :src='imgurl'></image>-->
<!--		  </view>-->
<!--		  <view class='add_pic1' :style='{height:width}' v-if="imgurl=='0'" data-type="img" v-on:click='update_logo'><view>店内照16:9</view></view> &ndash;&gt;-->
<!--		  <view class='form_con1'>-->
<!--		  	<block v-for="(item,index) in imgs" :key="index">-->
<!--		  		<image class='photo_con_pic' :id="item.img_id" -->
<!--				data-type="img" -->
<!--				v-on:click="update_logo" -->
<!--				:data-index="index" -->
<!--				mode='aspectFill' -->
<!--				:src='item.store_img' -->
<!--				v-on:longpress='delete_img'></image>-->
<!--		  	</block>-->
<!--		  	<view class='photo_con' data-type="img" id="0" v-on:click="update_logo">+</view>-->
<!--		  </view>-->
<!--		</view>-->
		<view class='pic'>
		  <view class='input_label'>营业执照</view>
		  <view class='pic_unit_1' :style='{height:width}' v-if="business_license!='0'" data-type="business_license" v-on:click='update_logo'>
			<image class='pic_unit_pic'  :style='{height:width}' mode='aspectFill' :src='business_license'></image>
		  </view>
		  <view class='add_pic1' :style='{height:width}' v-if="business_license=='0'" data-type="business_license" v-on:click='update_logo'><view>营业执照</view></view>
		</view>
<!--		<view class='title left'>-->
<!--		  <view class='input_label'>行业分类</view>-->
<!--		  <picker mode="selector" @change="sortChanges" :range-key="'store_sort_name'" :value="index" :range="sort">-->
<!--		   <view class="district">{{store_sort_name}}</view>-->
<!--		  </picker>-->
<!--		</view>-->
		<view class='title'>
		  <view class='input_label'>姓名</view>
		  <input class='input_text' placeholder='姓名' data-name="name" @input="input_" :value="name"></input>
		</view>
<!--		<view class='title'>-->
<!--		  <view class='input_label'>获取定位坐标</view>-->
<!--		  <view class="lbs" v-on:click="show_map">{{lbs}}</view>-->
<!--		</view>-->
<!--		<view class='title_'>-->
<!--		  <view class='input_label'>开店</view>-->
<!--		  <switch :checked="open==1?true:false" @change="open_change"/>开闭店设置-->
<!--		</view>-->
<!--		<view class='title'>-->
<!--			<view class='input_label'>营业时间</view>-->
<!--			<picker mode="time" :value="start_time" start="05:00" end="23:00" @change="start_time_change">-->
<!--				<view class="uni-input">{{start_time}}</view>-->
<!--			</picker>~-->
<!--			<picker mode="time" :value="end_time" start="05:00" end="23:00" @change="end_time_change">-->
<!--				<view class="uni-input">{{end_time}}</view>-->
<!--			</picker>-->
<!--		</view>-->
		<view class='title'>
		  <view class='input_label'>联系方式</view>
		  <input type='number' class='input_text' placeholder='输入联系方式' :value="phone" data-name="phone" @input="input_"></input>
		</view>
		<view class="lh"></view>
		<view class='button' :data-status="status" v-on:click='merchant_submit'>提交审核</view>
	</view>
</template>
<style>
	page{background: #FFFFFF !important;}
	#map{border-radius: 20upx 20upx 0 0;background: #FFFFFF;position: fixed;bottom:0;left:0;z-index: 999999;overflow: hidden;}
	.map_pic{position: fixed;height: 80upx;background: #E03636;width:97%;padding-right: 3%;align-items: center;z-index: 999999;top:0;
	border-top-left-radius: 20upx;border-top-right-radius: 20upx;display: flex;justify-content:flex-end;}
	.map_pic cover-image,.map_pic image{width:30upx;height: 30upx;}
	/*****************************************************/
	.form_con1{width:74%;margin:20upx 0;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;}
	.photo_con{height:180upx;line-height: 180upx;width:180upx;text-align: center;font-size:80upx;margin:10upx;
	           font-weight: bold;  border:1rpx solid #e1e1e1; border-radius: 10rpx;color:#ccc;overflow: hidden; }
	.photo_con_pic{height:180upx;width:180upx;margin:10upx;border: 1px solid #F1F1F1;}
	/****************************************************/
	.title{width:94%;padding:10rpx 3%;display: flex;justify-content:space-between;}
	.title_{width:94%;padding:10rpx 3%;display: flex;justify-content:flex-start;font-size: 26upx;align-items: center;}
	.input_label{width:30%;height:50rpx;line-height: 50rpx;font-size:26rpx;}
	.input_text,.lbs{width:72%;height:50rpx;line-height: 50rpx;font-size:26rpx;border:1px solid #d1d1d1;border-radius: 10rpx;padding-left:2%;}
	
	.button{width:90%;margin:20upx 5%;font-size: 30upx;height: 80upx;position: fixed;bottom:0;left:0;
			border-radius: 50upx;background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;text-align: center;line-height: 80upx;}
	.district{font-size:24upx;}
	.left{justify-content: flex-start !important; align-items: center;height: 50upx;line-height: 50upx;}
	.content{width:74.5%;display: flex;flex-direction: column;}
	.textarea{width:95.5%;border-radius: 10rpx;font-size: 24rpx;line-height: 30rpx;color: #282828;height:150rpx;border:1px solid #d1d1d1;padding: 10rpx 2%;z-index: 1;}
	.pic{display: flex;justify-content:flex-start;width:94%;padding:10rpx 3%;align-items: center;}
	.add_pic{background: #d1d1d1;color: #666;font-size: 60rpx;width:31%;border:1px solid #d1d1d1;display: flex;align-items: center;margin:20rpx 0;text-align: center;justify-content: center;}
	.add_pic1{background: #d1d1d1;color: #666;font-size: 60rpx;width:74%;border:1px solid #d1d1d1;display: flex;align-items: center;margin:20rpx 0;text-align: center;justify-content: center;}
	.pic_unit{width:31%;margin:20upx 0;}
	.pic_unit_1{width:74%;margin:20upx 0;}
	.pic_unit_pic{width:100%}
	.input_unit{width:94%;padding:10rpx 3%;display: flex;justify-content: space-between;}
	.number{width:100%;height:50upx;line-height: 50upx;font-size: 28upx;color: #393939;text-align: right;}
	.select{width:75%;}
	.picker{font-size: 26rpx;height:50rpx;line-height: 50rpx;}
	.lh{width:100%;height: 120upx;}
</style>
<script>
	// import QQMapWX from  "../../static/js/qqmap-wx-jssdk.min.js";
	export default {
		data() {
			return {
				width:0,
				height:0,
				key:1,
				index:10,
				store_sort_id:0,
				store_sort_name:'请选择分类',
				sort:[],
				num:0,
				title:'',
				name:'',
				phone:'',
				status:1,
				address:'',
				id_face:'0',
				id_national_emblem:'0',
				imgurl:'0',
				business_license:'0',
				imgs:[],
				img_id:0,
				lbs:'点击获取坐标定位，以便客户更快找到您',
				map_w:'',
				map_h:'',
				markers: [],
				latitude:0,
				longitude:0,
				map_top:'',
				start_time:'05:00',
				end_time:'23:00',
				open:1,
				url: getApp().globalData.url,
				img_url:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res      = uni.getSystemInfoSync();
			var w      = res.windowWidth * 94 / 100 * 31 / 100;
			this.width  = w+"px";
			this.height = w+"px";
			this.map_w  = res.windowWidth+"px";
			this.map_h  = res.windowHeight -res.windowWidth*9/48-50 + "px";
			this.map_top = res.windowWidth*9/48+50+"px";
			this.get_sort_list();
		},
		onShow(){
			// this.initialize();
		},
		methods: {
			open_change:function(e)
			{
				if(e.detail.value)
				{
					this.open = 1;
				}
				else
				{
					this.open = 0;
				}
			},
			sortChanges:function(e)
			{
				var index = e.detail.value;
				this.store_sort_name = this.sort[index].store_sort_name;
				this.store_sort_id   = this.sort[index].store_sort_id;
				// console.log(this.industry[index]);
			},
			start_time_change:function(e)
			{
				this.start_time = e.target.value;
			},
			end_time_change:function(e)
			{
				this.end_time = e.target.value;
			},
			get_current_location:function()
			{
				var that = this;
				// uni.getLocation({
				//     type: 'wgs84',
				//     success: function (res) {
				// 		console.log(res);
				// 		that.lbs = res.latitude+","+res.longitude;
				// 		that.latitude = res.latitude;
				// 		that.longitude= res.longitude;
				// 		var tmp = {};
				// 		tmp.iconPath  = '../../static/images/location.png',
				// 		tmp.id        = 1;
				// 		tmp.latitude  = res.latitude;
				// 		tmp.longitude = res.longitude;
				// 		tmp.width  = 50;
				// 		tmp.height = 50;
				// 		that.markers[0] = tmp;
				//     }
				// });
			},
			show_map:function()
			{
				var that = this;
				//#ifdef MP-WEIXIN
				uni.chooseLocation({
				    success: function (res) {
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.lbs = that.latitude +","+that.longitude;
				    }
				})
				//#endif
			},
			delete_img:function(e)
			{
				this.img_id  = parseInt(e.currentTarget.id);
				var that = this;
				uni.showModal({
					title:"操作提醒",
					content:"确认要删除该图片?",
					success: (res) => {
						if(res.confirm)
						{
							uni.request({
								url: this.url+'/wechat_delete_img', 
								data: {img_id:this.img_id},
								header: {'Content-Type': 'application/json'},
								success: (res) => {
									if(res.data.status==1)
									{
										for(var i=0;i<that.imgs.length;i++)
										{
											if(that.imgs[i].img_id== that.img_id)
											{
												that.imgs.splice(i,1);
											}
										}
										uni.showToast({
											title:"操作成功",
											duration:1500
										})
									}
								}
							});
						}
					}
				})
			},
			update_logo:function(e)
			{
				var type = e.currentTarget.dataset.type;
				console.log(type);
				this.img_id  = parseInt(e.currentTarget.id);
				// console.log(this.img_id);return;
				var store_id = uni.getStorageSync("store_id");
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						if(type=="id_face")
						{
							that.id_face = res.tempFilePaths[0];
						}
						if(type=="id_national_emblem")
						{
							that.id_national_emblem = res.tempFilePaths[0];
						}
						// if(type=="img")
						// {
						// 	if(that.img_id==0)
						// 	{
						// 		var tmp = {};
						// 		tmp.img_id = that.img_id;
						// 		tmp.store_img = res.tempFilePaths[0];
						// 		tmp.store_id  = store_id;
						// 		that.imgs.push(tmp);
						// 	}
						// 	else
						// 	{
						// 		for(var i=0;i<that.imgs.length;i++)
						// 		{
						// 			if(that.imgs[i].img_id==that.img_id)
						// 			{
						// 				that.imgs[i].store_img = res.tempFilePaths[0];
						// 			}
						// 		}
						// 	}
						// 	that.imgurl = res.tempFilePaths[0];
						// }
						if(type=="business_license")
						{
							that.business_license = res.tempFilePaths[0];
						}
						that.upload_file(type);
					}
				});
			},
			upload_file:function(type)
			{
				var member_id  = uni.getStorageSync("member_id");
				var store_id   = uni.getStorageSync("store_id");
				if(store_id>0)
				{
					
				}
				else
				{
					store_id = 0;
				}
				var that = this;
				if(type=="id_face")
				{
					var name = 'id_face';
					var filePath = that.id_face;
				}
				// if(type=="img")
				// {
				// 	var name = 'store_photo';
				// 	var filePath = that.imgurl;
				// }
				if(type=="id_national_emblem")
				{
					var name = 'id_national_emblem';
					var filePath = that.id_national_emblem;
				}
				if(type=="business_license")
				{
					var name = 'business_license';
					var filePath = that.business_license;
				}
				uni.showLoading({
					title:"上传中",
					mask:true,
					success:(res)=>{
						uni.uploadFile({
							url:that.url+'/wechat_upload_store_file', 
							filePath:filePath,
							name:'file',
							formData:{'name':name,member_id:member_id,store_id:store_id,img_id:that.img_id},
							success:(res)=>{
								uni.hideLoading();
								var result = JSON.parse(res.data);
								// if(type=="store_photo")
								// {
								// 	if(that.img_id==0)
								// 	{
								// 		var len = that.imgs.length-1;
								// 		that.imgs[len].img_id = result.img_id;
								// 	}
								// }
								uni.setStorageSync("store_id",result.store_id);
							}
						})
					}
				})
			},
			merchant_submit:function(e)
			{
				var status = e.currentTarget.dataset.status;
				var member_id   = uni.getStorageSync("member_id");
				var store_id = uni.getStorageSync("store_id");

				var that = this;
				if(this.name.length==0)
				{
					uni.showToast({title:'姓名不能为空',duration:2000});
				}
				else if(this.phone.length==0)
				{
					uni.showToast({title:'电话不能为空',duration:2000});
				}
				// else if(this.id_face.length==1)
				// {
				// 	uni.showToast({title:'LOGO不能为空',duration:2000});
				// }
				// else if(this.imgs.length==0)
				// {
				// 	uni.showToast({title:'店面照片不能为空',duration:2000});
				// }
				else if(this.id_face.length==1)
				{
					uni.showToast({title:'身份证人像面不能为空',duration:2000});
				}
				else if(this.id_national_emblem.length==1)
				{
					uni.showToast({title:'身份证国徽面不能为空',duration:2000});
				}
				else if(this.business_license.length==1)
				{
					uni.showToast({title:'执照不能为空',duration:2000});
				}
				// else if(this.address.length==0)
				// {
				// 	uni.showToast({title:'地址不能为空',duration:2000});
				// }
				// else if(this.store_sort_id==0)
				// {
				// 	uni.showToast({title:'分类不能为空',duration:2000});
				// }
				else
				{
					if(status==1)//status防止重复提交
					{
						this.status = 0;
						var that = this;
						// var business_hours = this.start_time+"~"+this.end_time;
						uni.request({
							url: that.url+'/wechat_add_store_info', 
							data: {
								member_id:member_id,
								   id:store_id,
							       name:this.name,
								   // longitude:this.longitude,
								   // latitude:this.latitude,
								   // store_status:this.open,
								   // business_hours:business_hours,
								   // address:this.address,
								   // store_sort_id:this.store_sort_id,
								   phone:this.phone},
							method:"POST",
							header: {'Content-Type': 'application/x-www-form-urlencoded'},
							success: (res) => {
								if(res.data.status==1)
								{
									// console.log(res.data);
									that.status = 1;
									uni.switchTab({
										url:'/pages/member/index'
									});
								}
							}
						});
					}
				}
			},
			get_sort_list:function()
			{
				var member_id = uni.getStorageSync("member_id");
				var store_id  = uni.getStorageSync("store_id");
				var that = this;
				uni.request({
					url: this.url+'/wechat_store_sort_list', 
					data: {member_id:member_id,store_id:store_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res);
						that.sort = res.data.result;
						that.initialize();
					}
				});
			},
			initialize:function()
			{
				var that = this;
				var member_id    = uni.getStorageSync("member_id");
				var store_id = uni.getStorageSync("store_id");
				console.log(store_id)
				uni.request({
					url: that.url+'/wechat_find_store', 
					data: {member_id:member_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						if(res.data.status==1)
						{
							// if(res.data.imgs.length>0)
							// {
							// 	that.imgs = res.data.imgs;
							// 	for(var i=0;i<that.imgs.length;i++)
							// 	{
							// 		that.imgs[i].store_img = that.url+that.imgs[i].store_img;
							// 	}
							// }
							if(res.data.result.length>0)
							{
								var result  = res.data.result[0];
								that.name  = result.name;
								if(result.id_face.length>10)
								{
									that.id_face = that.url+result.id_face;
								}
								if(result.id_national_emblem.length>10)
								{
									that.id_national_emblem = that.url+result.id_national_emblem;
								}
								if(result.business_license.length>10)
								{
									that.business_license = that.url+result.business_license;
								}
								// if(result.business_hours!="")
								// {
								// 	var tmp = result.business_hours.split("~");
								// 	that.start_time = tmp[0];
								// 	that.end_time   = tmp[1];
								// }
								that.phone    = result.phone;

								// that.latitude = result.latitude;
								// that.longitude= result.longitude;
								// that.open = result.store_status;
								// if(result.latitude != null)
								// {
								// 	that.lbs  = result.latitude +","+result.longitude;
								// }
								
								// that.address  = result.address;
								// that.store_sort_id   = result.store_sort_id;
								// for(var i=0;i<that.sort.length;i++)
								// {
								// 	if(that.sort[i].store_sort_id==result.store_sort_id)
								// 	{
								// 		that.store_sort_name = that.sort[i].store_sort_name;
								// 	}
								// }
							}
						}
					}
				});
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
				if(e.currentTarget.dataset.name=="phone")
				{
					this.phone = e.target.value;
				}
				if(e.currentTarget.dataset.name=="address")
				{
					this.address = e.target.value;
				}
			}
		}
	}
</script>